<template>
  <div class="page-login">
    <n-form
      ref="formRef"
      inline
      :label-width="80"
      :model="model"
      :rules="rules"
    >
      <n-form-item label="姓名" path="user.name">
        <n-input v-model:value="model.user.name" placeholder="输入姓名" />
      </n-form-item>

      <n-form-item label="年龄" path="user.age">
        <n-input v-model:value="model.user.age" placeholder="输入年龄" />
      </n-form-item>

      <n-form-item label="电话号码" path="phone">
        <n-input v-model:value="model.phone" placeholder="电话号码" />
      </n-form-item>

      <n-form-item label="电子邮箱" path="email">
        <n-input v-model:value="model.email" placeholder="电子邮箱" />
      </n-form-item>

      <n-form-item>
        <n-button attr-type="button" @click="handleValidateClick">
          验证
        </n-button>
      </n-form-item>
    </n-form>
  </div>
</template>

<script>
export default {
  /**
   * name 选项的作用：
   *  1. 让 VueDevtools 更好的显示
   *  2. keep-alive 设置 include 或者 exclude 时，需要设置这个 name
   *  3. 当前组件内部要调用自己时（递归）
   */
  name: "login",

  data() {
    return {
      // 表单数据
      model: {
        user: {
          name: "",
          age: "",
        },
        phone: "",
        email: "",
      },
      // 表单校验规则
      rules: {
        user: {
          name: {
            required: true,
            message: "请输入 name",
            trigger: "blur",
          },
          age: {
            required: true,
            message: "请输入 age",
            trigger: ["input", "blur"], // 这两者情况都会触发校验
          },
        },
        // phone: {
        //   required: true, // 必填，表单对应的元素会显示 * 号
        //   message: "请输入 phone", // 提示文字
        //   trigger: "blur", // 触发校验的方式
        // },

        phone: [
          { required: true, message: "请输入 phone", trigger: "blur" },
          {
            // 自定义校验
            validator: (rule, value) => {
              console.log("value", value);
              // 返回 true, 校验通过。返回 false，校验不通过
              if (value.length > 11) {
                return false;
              }
              return true;
            },
            message: "最大支持11位",
            trigger: "blur",
          },
          {
            validator: (rule, value) => {
              if (/^1\d{10}$/.test(value)) {
                return true;
              } else {
                return false;
              }
            },
            message: "请输入正确的手机号",
            trigger: "blur",
          },
        ],

        email: [
          {
            type: "email", // 需要使邮箱格式
            message: "请输入正确的邮箱地址",
            trigger: "blur",
          },
        ],
      },
    };
  },

  methods: {
    handleValidateClick() {
      console.log("提交");
    },
  },
};
</script>

<style lang="scss" scoped>
.page-login {
  height: 100%;
  // background-color: green;
}
</style>
